<template>
    <div class="main flex">
        <div class="left">

            <custom-head bold text="选择机房" class="mt15">
                <div>
                    共<span class="primary-color">{{ selecData.length }}</span>个机房
                </div>
            </custom-head>
            <el-form :model="form" :rules="rules" ref="form" label-width="52px" class="form mt15">
                <el-form-item label="机房" prop="name">
                    <el-select size="mini" v-model="form.selectValue" @change="getRoomInfo(form.selectValue)"
                        placeholder="请选择机房" style="width: 100%;">
                        <el-option :label="item.title" :value="item.resourceId" v-for="item in selecData" />
                    </el-select>
                </el-form-item>
            </el-form>

            <custom-head bold text="资产选择"></custom-head>

            <el-row class="mt15" type="flex" justify="space-between">
                <el-input size="mini" clearable v-model="filterText" placeholder="请输入资产名称"></el-input>
            </el-row>

            <div class="tree-wrap mt25">
                <el-tree :data="this.environment" :current-node-key="currentKey" ref="tree"
                    :default-expanded-keys="defaultKeys" :filter-node-method="filterNode" highlight-current accordion
                    node-key="resourceId" @node-click="handleNodeClick"></el-tree>
            </div>

        </div>
        <div class="right">
            <div class="head">
                <div class="flex" v-if="assetDetail">
                    <div class="img-wrap flex-ac">
                        <img width="60" height="40" :src="getImgSrc(3, assetDetail.assetType)">
                    </div>
                    <div>
                        <div>资产名称：<span>{{ assetDetail.hostNameCn }}</span></div>
                        <div>资产编号：<span>{{ assetDetail.assetNum }}</span></div>
                        <div>地址：<span>{{ assetDetail.assetPlaceName }}</span></div>
                    </div>
                    <div>
                        <div>资产类型：<span>{{ assetDetail.assetTypeName }}</span></div>
                        <div>资产状态：<span class="custom-succes-color">{{ assetDetail.stateName }}</span></div>
                        <div>所属业务：<span>{{ assetDetail.proName }}</span></div>
                    </div>
                    <div>
                        <div>主机名称：<span>{{ assetDetail.hostNameCn }}</span></div>
                        <div>负责人：<span>{{ assetDetail.proLeaderName }}</span></div>
                    </div>
                </div>
            </div>
            <div class="bottom mt15">
                <asset-info ref="aseetRef" :resourceId="resourceId" :resourceTypeId="resourceTypeId" />
            </div>
        </div>
    </div>
</template>
<script>
import {
    getMachineRoom, getMachineRoomInfo,
    getCabinetDetail, getEnvironmentRoomList
    , getAssetsDetail
} from "@/api/computerRoomApi.js";
import utils from "@/utils/date.js"
import customHead from "@/components/head/index.vue"
import assetInfo from "@/components/assetInfo/index.vue"
import imgSrc from "../../utils/imgSrc";
export default {
    components: { customHead, assetInfo },
    data() {
        return {
            selecData: [],
            form: {
                selectValue: "",//下拉选中
                hostName: "",//主机名
                resourceName: "",//资源名
                radio: "今日",//
                startDate: "",//开始日期
                endDate: "",
                dimension: "",//维度
            },
            defaultKeys: [],
            currentKey: "",
            rules: {
                name: [
                    { required: true, message: "请输入机房名称", trigger: "blur" }
                ],
            },
            filterText: "",//过滤
            roomInfo: {},//机房信息
            cabinetInfo: {},//当前选中的机柜信息
            assetDetail: {},//资产详情
            environment: [],
            resourceId: "",
            resourceTypeId: ""
        };
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
    mounted() {
        // 获取所有机房列表
        getMachineRoom().then(res => {
            if (res.code == "200") {
                this.selecData = res.info;
                this.form.selectValue = this.selecData[0].resourceId;
                // 机房详情
                this.getRoomInfo(this.form.selectValue);
                return
            }
            this.message(res.msg, 3);
        });
    },

    methods: {
        getRoomInfo(id) {
            // 获取机房详情
            getMachineRoomInfo({ resourceId: id }).then(res => {
                if (res.code == "200") {
                    this.roomInfo = res.info;
                    // 获取机柜详情
                    if (this.roomInfo.cabinetList.length) {
                        this.cabinetDetail(this.roomInfo.cabinetList[0], true)
                        this.total = this.roomInfo.cabinetList.length;
                    }
                    return
                }
                this.message(res.msg, 3)
            });
            getEnvironmentRoomList({
                resourceId: this.form.selectValue
            }).then(res => {
                if (res.code == "200") {
                    this.environment = res.info.children;
                    // 
                    const query = this.$route.query
                    console.log(query);
                    if (query && query.devId) {
                        this.activeIndex = query.active;
                        this.resourceId = query.devId
                        this.defaultKeys = [this.resourceId]
                        this.currentKey = this.resourceId;
                        // query.type ? query.type :
                        this.getDetail(query.devId, 1);
                        this.$refs.aseetRef.handleSelect(this.$refs.aseetRef.activeIndex)
                        this.$nextTick(() => this.$refs.tree.setCurrentKey(this.resourceId))
                    } else {
                        this.selectFirst(this.environment[0].children)
                    }

                }
            })
        },
        getImgSrc(type, id) {
            return imgSrc(type, id)
        },
        // 树形节点默认选中第一个
        selectFirst(array) {
            if (array[0].children) {
                this.selectFirst(array[0].children);
            }
            if (!array[0].children) {
                this.defaultKeys = [array[0].resourceId]
                this.currentKey = array[0].resourceId;
                this.getDetail(array[0].resourceId, 1);

                this.resourceId = array[0].resourceId;
                this.resourceTypeId = array[0].resourceTypeId;


                this.$nextTick(() => {
                    this.$refs.tree.setCurrentKey(array[0].resourceId)
                    this.$refs.aseetRef.handleSelect(this.$refs.aseetRef.activeIndex)
                })
            }
        },

        formatDate(date) {
            return utils.formatter(date, "yyyy-MM-dd hh:mm:ss")
        },
        // 过滤树形节点
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },

        // 树形点击
        handleNodeClick(data) {
            if (!data.children) {
                // 详情顶部
                this.getDetail(data.resourceId, 1);
                this.$refs.aseetRef.handleSelect(this.$refs.aseetRef.activeIndex)
                this.resourceId = data.resourceId;
                this.resourceTypeId = data.resourceTypeId;
            }
        },
        // 资产详情
        getDetail(resourceId, type) {
            getAssetsDetail({ resourceId: resourceId, type }).then(res => {
                if (res.code == "200") {
                    this.assetDetail = res.info
                }
            })
        },

        cabinetDetail(id, isFirst = false) {
            // 获取机柜详情
            getCabinetDetail({ resourceId: id }).then(res => {
                if (res.code == "200") {
                    if (isFirst) {
                        // 首次进入默认选中第一条
                        this.cabinetInfo = res.info.length ? res.info[1] : [];
                    }
                    this.cabinetList = [...res.info, []]
                    return
                }
                this.message(res.msg, 3)
            })
        }
    },
};
</script>
<style lang="scss" scoped>
.main {
    width: 100%;
    height: 100%;
    overflow: auto;
    margin: 0 auto;

    .left {
        width: 20%;
        height: 100%;
        padding: 16px;
        overflow: auto;
        box-shadow: 0px 0px 12px 0px rgba(129, 155, 151, 0.3);
        border-radius: 10px;
        background-color: #fff;

        .tree-wrap {
            font-size: 16px;
            color: #333;
            height: 74%;
            width: 100%;
            overflow: auto;

            .el-tree-node__content {
                font-weight: bold;
            }

            /deep/ .el-tree-node__label {
                color: #333;
            }

            /deep/ .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
                background-color: #21B794;

                .el-tree-node__label {
                    color: #fff;
                }
            }

            /deep/ .el-icon-caret-right:before {
                color: #666;
            }

            /deep/ .is-leaf.el-icon-caret-right:before {
                content: "";
            }
        }
    }

    .right {
        flex: 1;
        margin-left: 16px;
        overflow: auto;
        border-radius: 10px;

        .head {
            padding: 16px;
            overflow: auto;
            box-shadow: 0px 0px 12px 0px rgba(129, 155, 151, 0.3);
            border-radius: 10px;
            background-color: #fff;

            .flex {
                .img-wrap {
                    width: 140px;
                    height: 140px;
                    background-color: #E6E6E6;
                    margin-right: 37px;

                    img {

                        display: block;
                        margin: 0 auto;
                    }
                }


                &>div {
                    margin-right: 90px;

                    span {
                        margin-left: 10px;
                    }

                    div {
                        margin-bottom: 25px;
                    }
                }
            }
        }

        .bottom {
            padding: 16px;
            height: calc(100% - 190px);
            overflow: hidden;
            box-shadow: 0px 0px 12px 0px rgba(129, 155, 151, 0.3);
            border-radius: 10px;
            background-color: #fff;

        }
    }

}
</style>
  
  